.content {
  margin: 0 auto;
  width: calc(1600px + 140px);
  position: relative;
  .home_swiper {
    height: 600px;
    width: 1600px;
    background-color: #fff;
    position: relative;
    .shadow {
      position: absolute;
      z-index: 1;
    }
    .top {
      top: 0;
      width: 100%;
      height: 180px;
    }

    .right {
      top: 0;
      right: 0;
      width: 180px;
      height: 100%;
    }

    .bottom {
      bottom: 0;
      width: 100%;
      height: 180px;
    }

    .left {
      left: 0;
      top: 0;
      width: 180px;
      height: 100%;
    }
  }
  .card_item {
    padding: 20px 0;
    .list {
      width: 1600px;
      margin: auto;
      padding-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;
        .play_btn {
          margin-left: 20px;
        }
        .title {
          font-size: 26px;
          font-weight: bold;
          letter-spacing: 6px;
        }
      }
      .types {
        display: flex;
        align-items: center;
        font-size: 14px;
        > span {
          margin-right: 20px;
          cursor: pointer;
        }

        .more {
          cursor: pointer;
          display: flex;
          align-items: center;
        }
      }
    }
    .card_swiper {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .prev,
      .next {
        .el-button {
          height: 100px;
        }
      }
      .swiper {
        width: 1600px;
      }
      .new_song_swiper_list {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 50px;
        .item {
          cursor: pointer;
          width: calc((100% - 40px) / 3);
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-right: 20px;
          padding: 20px 0;
          .left {
            display: flex;
            align-items: center;
            .info {
              display: flex;
              flex-direction: column;
              margin-left: 20px;
              > span {
                font-size: 14px;
              }
              > span:last-of-type {
                margin-top: 10px;
                font-size: 12px;
              }
            }
          }
          > span {
            font-size: 14px;
          }
        }
        .item:nth-of-type(3),
        .item:nth-of-type(6),
        .item:nth-of-type(9) {
          margin: 0;
        }
        .item:nth-of-type(7),
        .item:nth-of-type(8),
        .item:nth-of-type(9) {
          border: none;
        }
      }
      .hot_singer_swiper_list {
        display: flex;
        padding: 20px 0 50px 0;
        .item {
          margin-right: calc((100% - 1200px) / 5);
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          .img {
            position: relative;
            .avatar {
              position: absolute;
              bottom: -30px;
              left: 70px;
            }
          }
          .info {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 50px;
            font-size: 12px;
            > span:first-of-type {
              font-weight: bold;
              font-size: 15px;
              margin-bottom: 10px;
            }
          }
        }
      }
      .hot_album_swiper_list {
        padding: 20px 0 50px 0;
        display: flex;
        .item {
          margin-right: calc((100% - 1200px) / 5);
          position: relative;
          cursor: pointer;
          .mask {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 4px;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            i {
              font-size: 40px;
              display: none;
            }
          }
          .mask:hover {
            background-color: rgba($color: #000000, $alpha: 0.3);
            i {
              display: block;
            }
          }
          .info {
            display: flex;
            flex-direction: column;
            font-size: 14px;
            color: #333;
            > span {
              margin-top: 10px;
            }
            > span:last-of-type {
              color: #666;
              font-size: 12px;
              margin-top: 6px;
            }
          }
          .tag {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 2px 6px;
            background-color: var(--el-color-primary);
            color: #fff;
            font-size: 12px;
            border-radius: 4px;
          }
        }
      }
      .hot_video_swiper_list {
        padding: 20px 0 50px 0;
        display: flex;
        flex-wrap: wrap;
        .item {
          position: relative;
          margin-right: calc((100% - 1200px) / 5);
          cursor: pointer;
          .mask {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 4px;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            i {
              font-size: 26px;
              display: none;
            }
          }
          .mask:hover {
            background-color: rgba($color: #000000, $alpha: 0.3);
            i {
              display: block;
            }
          }
          .info {
            display: flex;
            flex-direction: column;
            font-size: 12px;
            color: #666;
            .bottom {
              display: flex;
              justify-content: flex-end;
              align-items: center;
              .el-icon {
                margin-right: 6px;
              }
            }
          }
        }
      }
    }
  }
}

.light {
  color: #555;
  .home_swiper {
    .top {
      background-image: linear-gradient(
        0deg,
        rgba(244, 244, 244, 0) 20%,
        rgba(244, 244, 244, 0.4)
      );
    }
    .right {
      background-image: linear-gradient(
        -90deg,
        #f4f4f4,
        rgba(244, 244, 244, 0.4) 20%,
        rgba(244, 244, 244, 0)
      );
    }
    .bottom {
      background-image: linear-gradient(
        180deg,
        rgba(244, 244, 244, 0),
        #f4f4f4
      );
    }
    .left {
      background-image: linear-gradient(
        90deg,
        #f4f4f4,
        rgba(244, 244, 244, 0.4) 18%,
        rgba(244, 244, 244, 0)
      );
    }
  }

  .title {
    color: #333;
  }
  :deep(.swiper-pagination-bullet-active) {
    background-color: var(--el-color-primary);
  }
  .list {
    border-bottom: 3px solid var(--el-color-primary-light-7);
  }
  .types {
    > span:hover,
    .sel {
      font-weight: bold;
      color: var(--el-color-primary);
    }
  }
  .card_swiper {
    .prev,
    .next {
      .el-button {
        --el-button-bg-color: #f4f4f4;
        --el-button-hover-bg-color: #f4f4f4;
      }
    }
    .new_song_swiper_list {
      .item {
        border-bottom: 1px solid #e5e5e5;
      }
      .item:hover {
        .info > span {
          color: var(--el-color-primary);
        }
      }
    }
  }
}

.dark {
  color: #777;
  .home_swiper {
    .top {
      background-image: linear-gradient(
        0deg,
        rgba($color: #333, $alpha: 0) 20%,
        rgba($color: #333, $alpha: 0.4)
      );
    }
    .right {
      background-image: linear-gradient(
        -90deg,
        rgba($color: #333, $alpha: 1),
        rgba($color: #333, $alpha: 0.4) 20%,
        rgba($color: #333, $alpha: 0)
      );
    }
    .bottom {
      background-image: linear-gradient(
        180deg,
        rgba($color: #333, $alpha: 0),
        rgba($color: #333, $alpha: 1)
      );
    }
    .left {
      background-image: linear-gradient(
        90deg,
        rgba($color: #333, $alpha: 1),
        rgba($color: #333, $alpha: 0.4) 18%,
        rgba($color: #333, $alpha: 0)
      );
    }
  }

  .title {
    color: #999;
  }
  :deep(.swiper-pagination-bullet-active) {
    background-color: #fff;
  }
  :deep(.swiper-pagination-bullet) {
    background-color: #999;
  }
  .title {
    color: #f4f4f4;
  }
  .list {
    border-bottom: 3px solid #666;
    .types {
      > span:hover,
      .sel {
        color: #fff;
        font-weight: bold;
      }
    }
  }
  .card_swiper {
    .prev,
    .next {
      .el-button {
        --el-button-bg-color: transparent;
        --el-button-hover-bg-color: rgba(22, 22, 26, 1);
        --el-button-hover-text-color: #fff;
        border-color: #666;
      }
    }
    .new_song_swiper_list {
      .item {
        border-bottom: 1px solid #444;
      }
      .item:hover {
        .info > span {
          color: #fff;
        }
      }
    }
  }
}
